<template>
    <div class="login-body">
        <div class="content">
            <p>登录页</p>
            <div class="info-box">
                <el-form ref="form" :model="form" :rules="rules" label-width="80px">
                    <el-form-item label="账号:" prop="userName">
                        <el-input v-model="form.userName"></el-input>
                    </el-form-item>
                    <el-form-item label="密码:" prop="passWord">
                        <el-input v-model="form.passWord"></el-input>
                    </el-form-item>
                </el-form>
            </div>
            <el-button type="primary" class="login-btn" @click="loginHandel">登录</el-button>
            <span>账号(3-10字母); 密码:6-20位(字母、数字和标点符号至少包含两种)</span>
            <span>admin是超级管理员账户</span>
        </div>
        <el-button @click="loginHandel">注66666册</el-button>
    </div>
</template>
<script>
import { logins , testProxy } from '@/api/request/login/index.js'
import axios from 'axios'
import { mapMutations } from 'vuex'
export default {
    name: 'login-page',
    data() {
        return {
            form: {
                userName: '',
                passWord: ''
            },
            rules: {
                userName: [
                    { required: true, message: '请输入账号', trigger: 'blur' },
                    { min: 3, max: 10, message: '请输入3-10位账号名', trigger: 'blur' },
                    { pattern: /^[A-Za-z]+$/, message: '账号必须是字母', trigger: 'blur' }
                ],
                passWord: [
                    { required: true, message: '请输入密码', trigger: 'blur' },
                    // 密码校验（6-20位英文字母、数字或者符号（除空格），且字母、数字和标点符号至少包含两种）
                    { min: 6, max: 20, message: '请输入6-20位密码', trigger: 'blur' },
                    { pattern: /^(?![\d]+$)(?![a-zA-Z]+$)(?![^\da-zA-Z]+$)([^\u4e00-\u9fa5\s]){6,20}$/, message: '字母、数字和标点符号至少包含两种', trigger: 'blur' }
                ],
            }
        }
    },
    methods: {
        ...mapMutations('login', ['setLoginInfo']),
        loginHandel() {
            this.$refs.form.validate(async (valid) => {
                if (valid) {
                    let res = await logins('/login', this.form)
                    if (res.code != 200) return this.$message.error('erro')
                    this.setLoginInfo({ userName: this.form.userName, token: res.datas.token })
                    this.$router.push('/')
                } else {
                    console.log('error submit!!');
                    return false;
                }
            });
        },
        async loginHandel(){
            let rest = await testProxy('/',{})
            console.log('跨域成功！！！',rest);
        }
    }
}
</script>
<style scoped lang="less">
.login-body {
    width: 100%;
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    z-index: 999;
    background-color: #F0F8FF;

    .content {
        width: 400px;
        background-color: #fff;
        margin: 8% auto;
        padding: 20px 40px;

        p {
            text-align: center;
            font-size: 18px;
            font-weight: 500;
            color: #000;
            margin-bottom: 15px;
        }

        .info-box {
            /deep/ .el-form-item {
                margin-bottom: 20px;
                padding-bottom: 8px;
                border-bottom: 1px solid #eee;
            }

            /deep/ .el-input__inner {
                width: 80%;
                background-color: #d9f1fa;
            }

            /deep/ .el-form-item__label {
                text-align: left;
            }
        }

        .login-btn {
            width: 100%;
        }

        span {
            font-size: 12px;
            text-align: right;
            display: inherit;
            color: rgb(153, 149, 153);
            margin-top: 10px;
        }
    }
}
</style>